<template>


<el-container class="first_con">
<!-- 头部 -->
  <el-header>
      <div>
          <img src="../assets/logo.png" alt="" style="width:45px; height:45px">
          <span>博客管理系统</span>
      </div>
      <div>
          <span>你好</span>
          <el-button type="primary" @click="loginOut" size="small">退出</el-button>
      </div>
  </el-header>
  <el-container>
      <!-- 左侧边栏 -->
    <el-aside :width="isCollapse?'64px':'200px'">
        <div  @click="isCollapse=!isCollapse" class="aside_position">|||</div>
        <el-menu
      :default-active="activePath"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router='true'
      :unique-opened="true"
      :collapse-transition='false'
      :collapse="isCollapse"
      >
      <el-submenu v-for="item in adminList" :key="item.c_id" :index="item.c_id+''">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{item.c_name}}</span>
        </template>
        
          <el-menu-item :index="item.c_path+''" @click="changeActive('/'+item.c_path)">
            <span>{{item.c_name}}</span>
          </el-menu-item>
        
        
      </el-submenu>
      
      
    </el-menu></el-aside>
    <!-- 右边内容 -->
    <el-main>
        <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
    data(){
        return{
            adminList:[
                {
                    c_name:"首页模块",
                    c_id:1,
                    c_path:"user"
                },
                {
                    c_name:"分类模块",
                    c_id:2,
                    c_path:"article"
                }
            ],
            isCollapse:false,
            activePath:""
        }
    },
    created(){
        this.activePath = window.localStorage.getItem("path")
    },
    methods:{
        changeActive(path){
            window.localStorage.setItem('path',path)
            this.activePath = path
        },
        loginOut(){
          
            this.$router.push('/first')
        }
    }
}
</script>

<style>
.el-header{
    background: rgb(55,62,65);
    display:flex;
    justify-content: space-between;
    line-height: 60px;
    color: #fff;
    font-size: 18px;
}
.el-header img{
    vertical-align: middle;
}
.el-aside {
  background: rgb(51, 55, 68);
}
.el-main {
  background: rgb(234, 237, 241);
}
.first_con{
    height: 100%;
}
.aside_position{
    text-align: center;
}

</style>